.hero
  padding-top: 56px
  text-align: center
  position: relative

  h1
    font-size: 56px !important
  h2
    font-size: 20px !important
    font-weight: 300 !important
    display: inline-block
    max-width: 80%
    line-height: 1.5

  &:not(.hero-doc)
    @include diagonal(-6deg, $white, 300px, before)
      bottom: -190px
      z-index: 1
      box-shadow: rgba(112, 128, 175, 0.05) 0 -16px 24px

      @media (max-width: $screen-sm)
        height: 100px
        bottom: -80px

  @media (max-width: $screen-sm)
    figure
      img
        width: 80%
        max-width: 320px

    h1
      font-size: 36px !important
      font-weight: bold
    h2
      font-size: 18px !important


  .row
    background: url(../images/background-hero.svg)no-repeat center left / 80%

    @media (max-width: $screen-sm)
      background: url(../images/background-hero.svg)no-repeat center left / cover

    @media (min-width: 1600px)
      height: 600px
      background: url(../images/background-hero.svg)no-repeat center left / 80%


// Hero documentation
.hero.hero-doc
  background:
    image: url('../images/logo_isjs.svg'), linear-gradient(284deg, #fcb43a, #fedd4e)
    repeat: no-repeat
    size: 330px, 100%
    position: top 90% right 5em, center left